<template>
    <div class="order-list">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="手机">
                <el-input v-model="formInline.telPhone" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item label="订单ID">
                <el-input v-model="formInline.orderCode" placeholder="订单ID"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="formInline.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="申请时间" class="order-time">
                <el-row>
                    <el-col :span="11" class="time-width">
                        <el-date-picker
                                v-model="formInline.startTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                default-time="00:00:00">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="1" class="time-span">~</el-col>
                    <el-col :span="11" class="time-width">
                        <el-date-picker
                                v-model="formInline.endTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                default-time="23:59:59">
                        </el-date-picker>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="状态">
                <el-select clearable v-model="formInline.status" placeholder="请选择状态">
                    <el-option v-for="(item, index) in orderStatus"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border highlight-current-row size="small">
            <el-table-column align="center" label='订单ID' width="170" prop="orderCode">
                <template slot-scope="scope">
                    <div class="style-active" @click="checkOrderDetail(scope.row.orderId)">{{scope.row.orderCode}}</div>
                </template>
            </el-table-column>
            <el-table-column label="产品名称" min-width="100" align="center" prop="productName"></el-table-column>
            <el-table-column label="退单游客" width="140" align="center" prop="nickName"></el-table-column>
            <el-table-column label="退单数量" width="100" align="center" prop="num"></el-table-column>
            <el-table-column label="手机号码" width="120" align="center" prop="telphone"></el-table-column>
            <el-table-column label="客人姓名" width="110" align="center" prop="name"></el-table-column>
            <el-table-column label="退单金额（元）" min-width="110" align="center" prop="refundAmount"></el-table-column>
            <el-table-column label="状态" width="110" align="center" prop="statusStr"></el-table-column>
            <el-table-column label="申请人" width="110" align="center" prop="cUStr"></el-table-column>
            <el-table-column label="申请时间" width="160" align="center" prop="cTStr"></el-table-column>
            <el-table-column label="操作" width="160" align="center">
                <template slot-scope="scope">
                    <div class="style-a">
                        <a href="javascript:void(0);" @click="handleRefundOrder(1, scope.row.refundId, scope.row.productName, scope.row.num, scope.row.refundAmount)">同意</a>
                        <a href="javascript:void(0);" @click="handleRefundOrder(0, scope.row.refundId, scope.row.productName, scope.row.num, scope.row.refundAmount)">拒绝</a>
                    </div>
            </template>
        </el-table-column>
    </el-table>
    <!--查看详情弹窗-->
        <el-dialog
                title="订单详情"
                width="800px"
                :visible.sync="detailDialogVisible">
            <el-button type="primary" size="mini" @click="checkActivedCode(orderInfo.orderId)">查看激活码</el-button>
            <p class="p">
                <span class="span">产品名称：<span>{{orderInfo.productName}}</span></span>
                <span class="span">下单时间：<span>{{orderInfo.cTStr}}</span></span>
                <span class="span">代理商名称：<span>{{orderInfo.orgName}}</span></span>
            </p>
            <p class="p">
                <span class="span">购买数量：<span>{{orderInfo.num}}</span></span>
                <span class="span">单返佣：<span>{{orderInfo.serviceCharge}}元</span></span>
                <span class="span">总返佣：<span>{{orderInfo.serviceChargeTotal}}元</span></span>
            </p>
            <p class="p">
                <span class="span">单价：<span>{{orderInfo.unitAmount}}元</span></span>
                <span class="span">总价：<span>{{orderInfo.orderAmount}}元</span></span>
            </p>
            <p class="p">
                <span class="span">客人姓名：<span>{{orderInfo.name}}</span></span>
                <span class="span">微信账号：<span>{{orderInfo.nickName}}</span></span>
                <span class="span">手机号：<span>{{orderInfo.telPhone}}</span></span>
            </p>
            <p class="p">
                <span class="span">已激活数量：<span v-if="orderInfo.orderCount">{{orderInfo.orderCount.activeNum}}</span></span>
                <span class="span">已失效数量：<span v-if="orderInfo.orderCount">{{orderInfo.orderCount.overDueNum}}</span></span>
                <span class="span">可激活数量：<span v-if="orderInfo.orderCount">{{orderInfo.orderCount.unActiveNum}}</span></span>
            </p>
            <el-table
                    :data="orderInfo.activeList"
                    size="mini"
                    border
                    style="width: 100%" v-if="orderInfo.activeList&&orderInfo.activeList.length">
                <el-table-column
                        prop="name"
                        label="已激活会员姓名"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="cardCode"
                        label="会员ID"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="activeCode"
                        label="激活码"
                        align="center"
                        width="">
                </el-table-column>
                <el-table-column
                        prop="idCard"
                        class="stock"
                        label="身份证号"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="activeTimeStr"
                        label="激活时间"
                        align="center">
                </el-table-column>
            </el-table>
            <el-table
                    :data="orderInfo.refundingList"
                    size="mini"
                    border
                    style="width: 100%" v-if="orderInfo.refundingList&&orderInfo.refundingList.length">
                <el-table-column
                        prop="num"
                        label="申请退单数量"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="applyUser"
                        label="申请人"
                        align="center"
                        width="">
                </el-table-column>
                <el-table-column
                        prop="refundTimeStr"
                        class="stock"
                        label="申请退单时间"
                        align="center">
                </el-table-column>
            </el-table>
            <el-table
                    :data="orderInfo.refundedList"
                    size="mini"
                    border
                    style="width: 100%" v-if="orderInfo.refundedList&&orderInfo.refundedList.length">
                <el-table-column
                        prop="num"
                        label="已退单数量"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="verifyUser"
                        label="操作人"
                        align="center"
                        width="">
                </el-table-column>
                <el-table-column
                        prop="refundTimeStr"
                        class="stock"
                        label="退单时间"
                        align="center">
                </el-table-column>
            </el-table>
            <!--内层激活码弹窗-->
            <el-dialog
                    width="30%"
                    title="激活码"
                    :visible.sync="innerVisible"
                    append-to-body>
                <el-table
                        :data="activedCodeList"
                        size="mini"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="code"
                            label="激活码码号"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="activeTimeStr"
                            label="激活时间"
                            align="center"
                            width="">
                    </el-table-column>
                    <el-table-column
                            prop="loseTimeStr"
                            class="stock"
                            label="过期时间"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="statusStr"
                            class="stock"
                            label="状态"
                            align="center">
                    </el-table-column>
                </el-table>
                <span slot="footer" class="dialog-footer">
                    <el-button size="small" @click="innerVisible = false">关 闭</el-button>
                </span>
            </el-dialog>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="detailDialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-pagination
                layout="total, prev, pager, next, jumper"
                :total="total"
                :page-size="20"
                :current-page="currentPage"
                @current-change="handleChangePage">
        </el-pagination>
    </div>
</template>
<script>
	import { getOrderDetail, getOrderCode } from '@/api/orderList'
	import { getApplyRefundList, handleRefundApply, getApplyOrderStatus } from '@/api/applyRefundList'

	export default {
		data() {
			return {
				list: [],
				listLoading: false,
				formInline: {
					telPhone: '',
					orderCode: '',
					name: '',
					startTime: null,
					endTime: null,
					type: ''
				},
				total: null,
				currentPage: 1,
				pageSize: 20,
				typeClassMap: {
					1: 'not-pay',
					2: 'has-pay',
					9: 'has-cancel'
				},
				orderStatus: [],
				// 同意/拒绝退单
                orderId: null,
                title: '',
                description: '',
				// 订单详情弹框
				detailDialogVisible: false,
				orderInfo: {},
				activedCodeList: [],
				innerVisible: false
			}
		},
		created() {
			this.fetchData()
			this.getApplyOrderStatus()
		},
		methods: {
			handleRefundOrder(flag, refundId, prdName, num, amount) {
				this.orderId = refundId
				if (flag) {
					this.title = '同意退单'
					this.description = '同意退【' + prdName + '】' + num + '份，需返还退单金额' + amount + '元，是否确定？'
                } else {
					this.title = '拒绝退单'
					this.description = '拒绝退【' + prdName + '】' + num + '份，返还退单金额0元，是否确定？'
                }
				this.$confirm(this.description, this.title, {
					confirmButtonText: '是',
					cancelButtonText: '否',
					type: 'warning'
				}).then(() => {
					this.handleRefundApply(flag)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					})
				})
            },
			handleRefundApply(status) {
				let params = {
					refundOrderId: this.orderId,
					status: status
                }
                this.listLoading = true
				handleRefundApply(params).then(res => {
					let data = res.data
                    this.listLoading = false
					if (data.errorCode === 'E_000') {
						this.$message({
							type: 'success',
							message: data.message
						})
                        this.fetchData()
					}
				}).catch(() => {
					this.listLoading = false
                })
            },
			fetchData() {
				this.listLoading = true
				let formInline = this.formInline
				let params = {
					telPhone: formInline.telPhone,
					orderCode: formInline.orderCode,
					name: formInline.name,
					startTime: new Date(formInline.startTime).getTime() || '',
					endTime: new Date(formInline.endTime).getTime() || '',
					status: formInline.status,
					pageNumber: this.currentPage,
					pageSize: this.pageSize
				}
				getApplyRefundList(params).then(res => {
					let data = res.data
					this.listLoading = false
					if (data.errorCode === 'E_000') {
//						data.body.list.forEach(item => {
//							item.cTStr = item.cTStr.replace(/\s+/, '<br>')
//						})
						this.list = data.body.list
						this.total = data.body.total
					}
				}).catch(() => {
					this.listLoading = false
				})
			},
			onSearch() {
				this.fetchData()
			},
			handleChangePage(val) {
				this.currentPage = val
				this.fetchData()
			},
			checkOrderDetail(orderId) {
				this.detailDialogVisible = true
				let params = {
					orderId: orderId
				}
				getOrderDetail(params).then(res => {
					let data = res.data
					if (data.errorCode === 'E_000') {
						this.orderInfo = data.body
					}
				})
			},
			checkActivedCode(orderId) {
				this.innerVisible = true
				let params = {
					orderId: orderId
				}
				getOrderCode(params).then(res => {
					let data = res.data
					if (data.errorCode === 'E_000') {
						this.activedCodeList = data.body
					}
				})
			},
			getApplyOrderStatus() {
				getApplyOrderStatus().then(res => {
					let data = res.data
					if (data.errorCode === 'E_000') {
						this.orderStatus = data.body
					}
				})
			}
		}
	}
</script>
<style lang="scss">
    .order-list{
        .el-dialog__body{
            padding-top: 10px;
        }
        .el-table__header-wrapper{
            overflow: visible;
        }
        .order-time{
            .el-form-item__content{
                width: 480px;
            }
            .time-width{
                width: 220px;
            }
            .time-span{
                text-align: center;
            }
        }
        .el-table{
            /*margin-top: 0px;*/
            overflow: visible !important;
        }
        .el-table .el-table__body-wrapper {
            overflow: visible;
        }
        .el-table .cell {
            padding: 0 4px;
            overflow: visible;
        }
    }
</style>
<style lang="scss" scoped>
    .span{
        display: inline-block;
        width: 32%;
        text-align: left;
        vertical-align: top;
        >span{
            color: #90949c;
            word-wrap: break-word;
            word-break: break-all;
        }
    }
    .txt-align{
        text-align: right;
    }
    .not-pay{
        color: #fb9150;
    }
    .has-pay{
        color: #5ec62a;
    }
    .has-cancel{
        color: #3399ff;
    }
</style>
